<template>
    <dl class="order-item-base">
        <dt>
            <p class="title">{{ title }}</p>
            <p v-if="time" class="time">{{ timeFomate }}</p>
        </dt>
        <dd>
            <p v-if="unit">{{ unit }}：{{ number }}</p>
            <p v-else-if="weight">重量：{{ weight }}kg</p>
            <p v-else-if="number">数量：{{ number }}个</p>
            <p v-if="price" class="price">
                <span v-if="status==1">预估报价</span>
                <span v-else-if="status==4">回收报价</span>
                <span v-if="status!=2">￥{{ price }}</span>
                <template v-if="isbaozhi==1 && status!=2">
                    <br/><span class="price-protect">(价格保护已开启)</span>
                </template>
            </p>
        </dd>
    </dl>
</template>

<script>
    export default {
        props: ['title', 'unit', 'time', 'weight', 'number', 'price', 'status', 'isbaozhi'],
        computed: {
            timeFomate() {
                return this.$moment(this.time).format('YYYY-MM-DD');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order-item-base {

        dt {
            display: flex;

            .title {
                flex: 1;
                font-size: 1.7rem;
                font-weight: 540;
                overflow: hidden;
            }

            .time {
                font-size: 1.3rem;
                color: #999999;
            }
        }

        dd {
            display: flex;
            margin-top: 0.8rem;

            p:first-child {
                flex: 1;
                font-size: 1.3rem;
                color: #999999;
                font-weight: 500;
            }

            .price {
                text-align: right;
                font-size: 1.4rem;
                color: #FF0101;

                span {
                    color: #999999;
                }

                .price-protect{
                    display: inline-block;
                    margin-top: .2rem;
                    color: #FF9000;
                }
            }
        }
    }
</style>
